<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统 - 首页</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        body {
            padding-top: 56px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .sidebar {
            min-height: calc(100vh - 56px);
            position: fixed;
            top: 56px;
            left: 0;
            width: 200px;
            z-index: 100;
            padding: 20px 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
            background-color: #343a40;
        }
        .sidebar .nav-link {
            color: #ddd;
            padding: 0.5rem 1rem;
        }
        .sidebar .nav-link:hover {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.1);
        }
        .sidebar .nav-link.active {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.2);
        }
        .sidebar .nav-link i {
            margin-right: 8px;
        }
        .main-content {
            margin-left: 200px;
            padding: 20px;
            flex: 1;
        }
        .card-stats {
            border-radius: 10px;
            transition: all 0.3s;
        }
        .card-stats:hover {
            transform: translateY(-5px);
            box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
        }
        .card-stats .card-body {
            padding: 1.5rem;
        }
        .card-stats .card-title {
            font-size: 0.875rem;
            text-transform: uppercase;
            color: #8898aa;
        }
        .card-stats .card-value {
            font-size: 1.5rem;
            font-weight: 600;
        }
        .icon-shape {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        .bg-gradient-primary {
            background: linear-gradient(87deg, #5e72e4, #825ee4);
        }
        .bg-gradient-info {
            background: linear-gradient(87deg, #11cdef, #1171ef);
        }
        .bg-gradient-success {
            background: linear-gradient(87deg, #2dce89, #2dcecc);
        }
        .bg-gradient-warning {
            background: linear-gradient(87deg, #fb6340, #fbb140);
        }
        /* Timeline styles */
        .timeline {
            position: relative;
            padding-left: 2rem;
        }
        .timeline-item {
            position: relative;
            padding-bottom: 1.5rem;
        }
        .timeline-item:last-child {
            padding-bottom: 0;
        }
        .timeline-item-marker {
            position: absolute;
            left: -2rem;
            width: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .timeline-item-marker-text {
            font-size: 0.75rem;
            color: #71767a;
            margin-bottom: 0.25rem;
        }
        .timeline-item-marker-indicator {
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 100%;
        }
        .timeline-item-content {
            position: relative;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e3e6ec;
        }
        .timeline-item:last-child .timeline-item-content {
            border-bottom: none;
            padding-bottom: 0;
        }
        /* Product image in table */
        .product-image-small {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/admin">
            <i class="fas fa-dumbbell"></i> 体育商城后台
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/" target="_blank">
                        <i class="fas fa-external-link-alt"></i> 访问前台
                    </a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown">
                        <i class="fas fa-user-circle"></i> ${adminUser}
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="${pageContext.request.contextPath}/admin/logout">
                            <i class="fas fa-sign-out-alt"></i> 退出登录
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <jsp:include page="sidebar.jsp" />

    <!-- 主要内容 -->
    <div class="main-content">
        <div class="container-fluid">
            <!-- 标题行 -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <h2 class="mb-1">仪表盘</h2>
                    <p class="text-muted">欢迎使用体育商城后台管理系统</p>
                </div>
            </div>
            
            <!-- 统计卡片 -->
            <div class="row">
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card card-stats shadow-sm">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <p class="card-title text-muted mb-0">总商品数</p>
                                    <h3 class="card-value text-nowrap mb-0" id="total-products">--</h3>
                                </div>
                                <div class="col-auto">
                                    <div class="icon-shape text-white bg-gradient-primary">
                                        <i class="fas fa-box"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card card-stats shadow-sm">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <p class="card-title text-muted mb-0">总分类数</p>
                                    <h3 class="card-value text-nowrap mb-0" id="total-categories">--</h3>
                                </div>
                                <div class="col-auto">
                                    <div class="icon-shape text-white bg-gradient-info">
                                        <i class="fas fa-tags"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card card-stats shadow-sm">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <p class="card-title text-muted mb-0">注册用户数</p>
                                    <h3 class="card-value text-nowrap mb-0" id="total-users">--</h3>
                                </div>
                                <div class="col-auto">
                                    <div class="icon-shape text-white bg-gradient-success">
                                        <i class="fas fa-users"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card card-stats shadow-sm">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <p class="card-title text-muted mb-0">库存数量</p>
                                    <h3 class="card-value text-nowrap mb-0" id="total-stock">--</h3>
                                </div>
                                <div class="col-auto">
                                    <div class="icon-shape text-white bg-gradient-warning">
                                        <i class="fas fa-warehouse"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 报表统计区域 -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title">销售统计</h5>
                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <h6 class="card-subtitle mb-2 text-muted">订单统计</h6>
                                            <div class="row">
                                                <div class="col-6">
                                                    <p class="small text-muted mb-1">总订单数</p>
                                                    <h5 id="total-orders">--</h5>
                                                </div>
                                                <div class="col-6">
                                                    <p class="small text-muted mb-1">今日订单</p>
                                                    <h5 id="today-orders">--</h5>
                                                </div>
                                            </div>
                                            <div class="row mt-3">
                                                <div class="col-6">
                                                    <p class="small text-muted mb-1">待处理订单</p>
                                                    <h5 id="pending-orders">--</h5>
                                                </div>
                                                <div class="col-6">
                                                    <p class="small text-muted mb-1">总销售额</p>
                                                    <h5 id="total-sales">¥--</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-subtitle mb-2 text-muted">销售趋势</h6>
                                            <div id="sales-chart-container" style="height: 150px; position: relative;">
                                                <canvas id="sales-chart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 热门商品排行 -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="card-title mb-0">热门商品排行</h5>
                                <a href="${pageContext.request.contextPath}/admin/products" class="btn btn-sm btn-outline-primary">查看全部</a>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th scope="col" style="width: 60px;">排名</th>
                                            <th scope="col">商品信息</th>
                                            <th scope="col" style="width: 120px;">价格</th>
                                            <th scope="col" style="width: 100px;">销量</th>
                                            <th scope="col" style="width: 100px;">库存</th>
                                            <th scope="col" style="width: 100px;">状态</th>
                                        </tr>
                                    </thead>
                                    <tbody id="hot-products-list">
                                        <!-- 这里会通过JavaScript动态填充内容 -->
                                        <tr><td colspan="6" class="text-center py-3">加载中...</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近活动 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title mb-3">最近活动</h5>
                            <div id="recent-activities">
                                <div class="timeline">
                                    <div class="timeline-item">
                                        <div class="timeline-item-marker">
                                            <div class="timeline-item-marker-text">今天</div>
                                            <div class="timeline-item-marker-indicator bg-primary"></div>
                                        </div>
                                        <div class="timeline-item-content">
                                            <span class="badge badge-success mr-2">订单</span>
                                            <span>新增 <strong>3</strong> 笔订单</span>
                                            <div class="text-muted small mt-1">2小时前</div>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="timeline-item-marker">
                                            <div class="timeline-item-marker-text">昨天</div>
                                            <div class="timeline-item-marker-indicator bg-info"></div>
                                        </div>
                                        <div class="timeline-item-content">
                                            <span class="badge badge-info mr-2">商品</span>
                                            <span>更新了 <strong>瑜伽垫</strong> 商品信息</span>
                                            <div class="text-muted small mt-1">昨天 14:21</div>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="timeline-item-marker">
                                            <div class="timeline-item-marker-text">昨天</div>
                                            <div class="timeline-item-marker-indicator bg-warning"></div>
                                        </div>
                                        <div class="timeline-item-content">
                                            <span class="badge badge-warning mr-2">用户</span>
                                            <span>新增 <strong>5</strong> 名注册用户</span>
                                            <div class="text-muted small mt-1">昨天 10:30</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery 和 Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
    <script>
        $(document).ready(function() {
            // 获取统计数据
            function loadStats() {
                $.get("${pageContext.request.contextPath}/admin/dashboard/stats", function(res) {
                    if (res.code === 200) {
                        $('#total-products').text(res.data.totalProducts || 0);
                        $('#total-categories').text(res.data.totalCategories || 0);
                        $('#total-users').text(res.data.totalUsers || 0);
                        $('#total-stock').text(res.data.totalStock || 0);
                        
                        // 更新订单统计数据
                        $('#total-orders').text(res.data.totalOrders || 0);
                        $('#today-orders').text(res.data.todayOrders || 0);
                        $('#pending-orders').text(res.data.pendingOrders || 0);
                        
                        // 格式化销售额显示
                        var totalSales = res.data.totalSales || 0;
                        $('#total-sales').text('¥' + totalSales.toLocaleString('zh-CN'));
                        
                        // 初始化销售趋势图
                        initSalesChart(res.data.dailySales);
                    }
                });
            }
            
            // 初始化销售趋势图
            function initSalesChart(dailySales) {
                if (dailySales) {
                    var labels = [];
                    var data = [];
                    
                    // 提取日期和销售额数据
                    dailySales.forEach(function(item) {
                        labels.push(item.date);
                        data.push(item.amount);
                    });
                    
                    var salesData = {
                        labels: labels,
                        datasets: [{
                            label: '日销售额',
                            data: data,
                            fill: false,
                            borderColor: 'rgb(75, 192, 192)',
                            tension: 0.1,
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderWidth: 2,
                            pointBackgroundColor: 'rgb(75, 192, 192)',
                            pointRadius: 4
                        }]
                    };
                    
                    // 清除原有图表容器内容
                    $('#sales-chart-container').empty();
                    $('#sales-chart-container').html('<canvas id="sales-chart"></canvas>');
                    
                    // 创建图表
                    var ctx = document.getElementById('sales-chart').getContext('2d');
                    var salesChart = new Chart(ctx, {
                        type: 'line',
                        data: salesData,
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: false
                                },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            return '¥' + context.raw.toLocaleString('zh-CN');
                                        }
                                    }
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        callback: function(value) {
                                            return '¥' + value;
                                        }
                                    }
                                }
                            }
                        }
                    });
                }
            }
            
            // 加载热门商品
            function loadHotProducts() {
                $.get("${pageContext.request.contextPath}/admin/products/hot", function(res) {
                    if (res.code === 200) {
                        renderHotProducts(res.data);
                    } else {
                        // 如果API返回错误，使用模拟数据
                        renderHotProductsMock();
                    }
                }).fail(function() {
                    // 如果API调用失败，使用模拟数据
                    renderHotProductsMock();
                });
            }
            
            // 渲染热门商品数据
            function renderHotProducts(products) {
                var html = '';
                if (products && products.length > 0) {
                    products.forEach(function(product, index) {
                        html += '<tr>';
                        html += '<td class="text-center">' + (index + 1) + '</td>';
                        html += '<td class="align-middle">';
                        html += '<div class="d-flex align-items-center">';
                        html += '<img src="' + (product.mainImage || '${pageContext.request.contextPath}/static/images/no-image.png') + '" alt="' + product.name + '" class="product-image-small mr-3">';
                        html += '<div>';
                        html += '<div class="font-weight-bold">' + product.name + '</div>';
                        html += '<div class="small text-muted">' + (product.subtitle || '') + '</div>';
                        html += '</div>';
                        html += '</div>';
                        html += '</td>';
                        html += '<td class="align-middle text-right">¥' + product.price.toFixed(2) + '</td>';
                        html += '<td class="align-middle text-center">' + (product.soldCount || 0) + '</td>';
                        html += '<td class="align-middle text-center">' + (product.stock || 0) + '</td>';
                        html += '<td class="align-middle text-center">';
                        if (product.status === 1) {
                            html += '<span class="badge badge-success">上架中</span>';
                        } else {
                            html += '<span class="badge badge-secondary">已下架</span>';
                        }
                        html += '</td>';
                        html += '</tr>';
                    });
                } else {
                    html = '<tr><td colspan="6" class="text-center py-3">暂无热门商品数据</td></tr>';
                }
                $('#hot-products-list').html(html);
            }
            
            // 模拟热门商品数据（当API不可用时使用）
            function renderHotProductsMock() {
                var mockProducts = [
                    {
                        id: 1,
                        name: '专业健身哑铃',
                        subtitle: '可调节重量',
                        price: 199.00,
                        soldCount: 156,
                        stock: 42,
                        status: 1,
                        mainImage: '${pageContext.request.contextPath}/static/uploads/product-1.jpg'
                    },
                    {
                        id: 2,
                        name: '瑜伽垫',
                        subtitle: '加厚防滑',
                        price: 89.00,
                        soldCount: 128,
                        stock: 76,
                        status: 1,
                        mainImage: '${pageContext.request.contextPath}/static/uploads/product-2.jpg'
                    },
                    {
                        id: 3,
                        name: '运动背包',
                        subtitle: '大容量防水',
                        price: 159.00,
                        soldCount: 98,
                        stock: 23,
                        status: 1,
                        mainImage: '${pageContext.request.contextPath}/static/uploads/product-3.jpg'
                    },
                    {
                        id: 4,
                        name: '跑步机',
                        subtitle: '家用静音',
                        price: 2999.00,
                        soldCount: 52,
                        stock: 8,
                        status: 1,
                        mainImage: '${pageContext.request.contextPath}/static/uploads/product-4.jpg'
                    },
                    {
                        id: 5,
                        name: '篮球',
                        subtitle: '标准7号',
                        price: 129.00,
                        soldCount: 87,
                        stock: 34,
                        status: 1,
                        mainImage: '${pageContext.request.contextPath}/static/uploads/product-5.jpg'
                    }
                ];
                renderHotProducts(mockProducts);
            }
            
            // 初始加载
            loadStats();
            loadHotProducts();
        });
    </script>
</body>
</html> 